<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
</head>
<body>
<!--
    v-show  如果是true  是显示
    v-show  如果是false 是隐藏
-->
<div id="app">
    <button v-text="btnText" @click="toggle">点我呀</button>
    <br>
    <img src="../images/a.png" width="170px" v-show="visible"/>
</div>
<script>

    const {createApp, ref} = Vue;
    const app = createApp({
        setup(){
            const btnText = ref('隐藏');
            const visible = ref(true);
            const toggle = () => {
                //影藏是否取反
                visible.value = !visible.value;
                //判断显示
                btnText.value = visible.value ? '隐藏' : '显示';
            }
            return {
                btnText, visible,
                toggle
            };
        }
    })

    app.mount('#app')
</script>

</body>
</html>